<template>
	<view class="user" :class="{active: bodyShow}">
		
		<view class="user-top">
			<view class="user-head">
				<image class="user-headicon" :src="userInfo.avatarUrl" v-if="userInfo" mode="widthFix" />
				<view class="user-default" v-else>
					<image src="../../static/default-user-headicon.png" mode="widthFix"/>
				</view>
				<text class="user-name">{{userInfo ? userInfo.nickName : '用户名'}}</text>
			</view>
			<!-- #ifdef MP-QQ||MP-WEIXIN -->
			<button open-type="getUserInfo" hover-class="none" @getuserinfo="userInfoAction" v-if="!userInfo">登录</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<button open-type="getUserInfo" hover-class="none" @click="getTtUserInfo" v-if="!userInfo">登录</button>
			<!-- #endif -->
		</view>
		<view class="user-list">
			<navigator url="/pages/user/mytest" class="user-item" v-if="userInfo">
				<image class="user-item-ic" src="../../static/uic-test.png" mode="widthFix" />
				<text>我的测试</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</navigator>
			<!-- #ifdef MP-QQ||MP-WEIXIN -->
			<button open-type="getUserInfo" hover-class="none" @getuserinfo="userInfoAction" class="user-item" v-else>
				<image class="user-item-ic" src="../../static/uic-test.png" mode="widthFix" />
				<text>我的测试</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<button open-type="getUserInfo" hover-class="none" @click="getTtUserInfo" class="user-item" v-else>
				<image class="user-item-ic" src="../../static/uic-test.png" mode="widthFix" />
				<text>我的测试</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</button>
			<!-- #endif -->
			

			
			<navigator url="/pages/user/attention" class="user-item" v-if="userInfo">
				<image class="user-item-ic" src="../../static/uic-fav.png" mode="widthFix" />
				<text>联系我们</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</navigator>
			<!-- #ifdef MP-QQ||MP-WEIXIN -->
			<button open-type="getUserInfo" hover-class="none" @getuserinfo="userInfoAction" class="user-item" v-else>
				<image class="user-item-ic" src="../../static/uic-fav.png" mode="widthFix" />
				<text>联系我们</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<button open-type="getUserInfo" hover-class="none" @click="getTtUserInfo" class="user-item" v-else>
				<image class="user-item-ic" src="../../static/uic-fav.png" mode="widthFix" />
				<text>联系我们</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</button>
			<!-- #endif -->
			<button open-type="share" hover-class="none" class="user-item">
				<image class="user-item-ic" src="../../static/uic-share.png" mode="widthFix" />
				<text>分享小程序</text>
				<image class="user-item-arrow" src="../../static/ic-arrow-right.png" mode="widthFix" />
			</button>
		</view>
	</view>
</template>

<script>
	import userCheck from '../../src/utils/user.js';
	import config from '../../src/config/api.config.js';
	import request from '../../src/utils/request.js';
	export default {
		data() {
			return {
				bodyShow: false, // 页面显示
				userInfo: null, // 用户信息
				parentOpenid: '',
				openid: '',
				localtionPlatform: '',
				popupVisible: false, // 绑定手机、修改密码显示隐藏
				modelTel: '', // 手机号码
				modelInitPwd: '', // 初始化密码
				modelNewPwd: '',  // 新密码
				userStatus: 0, // 用户表单类型 1 绑定手机 2 修改密码
				
			}
		},
		onLoad(options) {
			const that = this;
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			this.localtionPlatform = userCheck.PlatformType;
			userCheck.checkSession(function(openid){
				that.openid = openid;
			},this.parentOpenid);
			
			// 查看用户是否授权用户信息
			uni.getSetting({
				success: (r) => {
					// 如果已经授权了
					if (r.authSetting['scope.userInfo']) {
						uni.getUserInfo({
							success: (ur) => {
								this.userInfo = ur.userInfo;
								this.bodyShow = true;
								this.getUserStatus();
							}
						})
					} else {
						this.bodyShow = true;
					}
				}
			});
		},
		methods: {
			//授权后存储用户信息
			async saveUserInfo() {
				const r = await request({
					url: `${config.API}api/saveUserInfo`,
					data: {
						openid: this.openid,
						avatarUrl: this.userInfo.avatarUrl,
						nickName: this.userInfo.nickName
					},
				});
			},
			// #ifdef MP-QQ||MP-WEIXIN
			// 用户信息回调
			userInfoAction(r) {
				// 如果用户拒绝授权
				if (r.detail.errMsg === 'getUserInfo:fail auth deny' || r.detail.errMsg === 'getUserInfo:fail authorize deny') {
					return uni.showToast({
						title: '请允许授权',
						icon: 'none'
					});
				}
				// 登录
				this.userInfo = r.detail.userInfo;
				this.saveUserInfo();
			},
			// #endif
			
			// #ifdef MP-TOUTIAO
			//头条获取用户信息
			getTtUserInfo() {
				const that = this;
				tt.authorize({
					scope: "scope.userInfo",
					success(r) {
						console.log(r)
						tt.getUserInfo({
							success(res) {
								console.log(res.userInfo)
								// // 登录
								that.userInfo = res.userInfo;
								that.saveUserInfo();
								that.getUserStatus();
							},
							fail(res) {
								console.log(`getUserInfo 调用失败`);
							}
						});
					},
					fail(rr) {
						if(rr.errMsg == 'authorize:fail auth deny'){
							return uni.showToast({
								title: '请在设置里打开用户信息',
								icon: 'none'
							});
						}else{
							return uni.showToast({
								title: '请允许授权',
								icon: 'none'
							});
						}
						
					}
				});
			},
			// #endif
			/**
			 * 查看用户绑定状态
			 */
			async getUserStatus() {
				const r = await request({
					url: `${config.API}api/user/status?openid=${this.openid}`
				});
				if (r.error_code === 0) {
					this.userStatus = r.data.status;
				}
			},
			/**
			 * 设置用户表单显示隐藏
			 * @param {Object} visible 显示隐藏
			 */
			setUserFormVisible(visible) {
				this.popupVisible = visible;
			},
			/**
			 * 绑定手机、修改密码
			 */
			async userFormSubmit() {
				let _url = '', _data = {
					openid: this.openid
				};
				if (this.userStatus === 1) {
					if (this.modelTel === '') {
						return uni.showToast({
							title: '请输入手机号码',
							icon: 'none'
						});
					} else if (this.modelTel.length !== 11 || isNaN(this.modelTel)) {
						return uni.showToast({
							title: '手机号码格式错误',
							icon: 'none'
						})
					}
					if (this.modelInitPwd === '') {
						return uni.showToast({
							title: '请填写初始密码',
							icon: 'none'
						});
					}
					_url = `${config.API}api/user/bindPhone`;
					_data.user_password = this.modelInitPwd;
					_data.user_phone = this.modelTel;
				} else {
					if (this.modelNewPwd === '') {
						return uni.showToast({
							title: '请填写新密码',
							icon: 'none'
						});
					}
					_url = `${config.API}api/user/resetPwd`;
					_data.user_password = this.modelNewPwd;
				}
				const r = await request({
					url: _url,
					method: 'post',
					data: _data
				});
				if (r.error_code === 0) {
					this.popupVisible = false;
					this.modelTel = '';
					this.modelInitPwd = '';
					this.modelNewPwd = '';
					this.userStatus = 2;
					uni.showToast({
						title: this.userStatus === 1 ? '绑定成功' : '修改成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: r.msg,
						icon: 'none'
					});
				}
			},
			// 阻止点击事件冒泡关闭弹窗
			stopWithdrawalClose(event) {
				event.stopPropagation();
			},
		},
		onShareAppMessage(r) {
			let _path = '/pages/index/index?parentOpenid='+this.openid;
			console.log(_path)
			return {
				title: "心理测试、趣味测试",
				path: _path
			}
		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
.user {
	display: none;
	&.active {
		display: block;
	}
}
.user-top {
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 40rpx;
	.user-head {
		flex: 1;
		display: flex;
		align-items: center;
		.user-headicon {
			border-radius: 50%;
			width: 140rpx;
			height: 140rpx;
		}
		.user-default {
			width: 140rpx;
			height: 140rpx;
			background-color: #f1f1f1;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				display: block;
				width: 50%;
				height: 50%;
				border-radius: 50%;
			}
		}
		.user-name {
			display: block;
			font-size: 36rpx;
			color: #000;
			margin-left: 20rpx;
			flex: 1;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			min-width: 2rpx;
		}
		.user-btn {
			font-size: 28rpx;
			color: #007AFF;
		}
	}
	button {
		color: #5f89ff;
		border: 1px solid #5f89ff;
		border-radius: 10rpx;
		font-size: 26rpx;
		padding: 0 50rpx;
		&:after {
			border: 0;
			background: none;
		}
	}
}
.user-list {
	background-color: #fff;
	padding-left: 40rpx;
	margin-top: 40rpx;
	.user-item {
		display: flex;
		align-items: center;
		border: 0;
		border-bottom: 1px solid #f1f1f1;
		background-color: #fff;
		border-radius: 0;
		padding: 30rpx 0;
		&:after {
			border: 0;
		}
		&:last-child {
			border-bottom: 0;
		}
		.user-item-ic {
			display: block;
			width: 70rpx;
			height: 70rpx;
			margin-right: 10rpx;
		}
		.user-item-arrow {
			display: block;
			width: 40rpx;
			height: 40rpx;
			margin-right: 40rpx;
		}
		text {
			display: block;
			flex: 1;
			font-size: 32rpx;
			text-align: left;
		}
	}
}
.with-form {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	display: none;
	align-items: center;
	justify-content: center;
	&.active {
		display: flex;
	}
	.with-formedit {
		width: 84%;
		background-color: #fff;
		border-radius: 30rpx;
		overflow: hidden;
		dt {
			background-color: #5f89ff;
			font-size: 36rpx;
			color: #fff;
			padding: 30rpx 0;
			text-align: center;
		}
		dd {
			padding: 0 30rpx;
			.with-form-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				margin-top: 30rpx;
				label {
					display: block;
					width: 160rpx;
				}
				input {
					border: 1px solid #5f89ff;
					padding: 2rpx 10rpx;
					flex: 1;
					font-size: 24rpx;
					border-radius: 40rpx;
				}
			}
			.with-form-select {
				overflow: hidden;
				padding: 20rpx 0;
				span {
					float: left;
					margin-top: 24rpx;
					font-size: 30rpx;
					text-align: center;
					padding: 20rpx 0;
					background-color: #f0f0f0;
					color: #666;
					width: 28%;
					border-radius: 6rpx;
					box-sizing: border-box;
					border: 1px solid #f0f0f0;
					&.active {
						border: 1px solid #5f89ff;
					}
					&:nth-child(3n-1) {
						margin: 24rpx 8% 0 8%;
					}
				}
			}
			.with-form-tips {
				font-size: 20rpx;
				color: #aaa;
				padding: 0 0 40rpx 0;
				color: red;
			}
			.with-form-submit {
				padding: 0;
				border: 0;
				border-radius: 60rpx;
				color: #fff;
				font-size: 30rpx;
				background: linear-gradient(#5f89ff, #6475fd);
				margin: 40rpx 0;
				&:after {
					border: 0;
				}
			}
		}
	}

	.custom-share-button{
		
		img{
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-top: -2px;
			margin-right: 2px;
		}
		background-color: #007AFF;
		border-radius: 40px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		line-height: 60rpx;
		text-align: right;
		padding-right: 26rpx;
		font-size: 24rpx;
		background-color: #fff;
		position: fixed;
	    right: 0;
	    bottom: 60%;
	    z-index:2000;
	}
	.custom-share-button::after{
		border: 0px solid red;
	}
}
</style>
